<template>
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      style="position: sticky; top: 0; z-index: 2"
    >
      <template #title>
        当前城市 <van-icon name="minus" color="#000" size="12" />
      </template>
      <template #left>
        <van-icon name="cross" color="gray" size="20" />
      </template>
    </van-nav-bar>
    <van-search
      v-model="value"
      placeholder="输入城市名或拼音"
      @search="onSearch"
      background="#F4F4F4"
      style="position: sticky; top: 46px; z-index: 2"
    />
    <ul v-if="value" class="value">
      <template v-if="searchList.length > 0">
        <li
          v-for="city in searchList"
          :key="city.cityId"
          @click="handleCity(city)"
        >
          <p>{{ city.name }}</p>
        </li>
      </template>
      <template v-else>
        <van-empty
          class="custom-image"
          :image="require('@/assets/city-null.png')"
          :style="{ height: calcHeight }"
          description="没有找到匹配的城市"
        >
        </van-empty>
      </template>
    </ul>
    <div v-else>
      <div class="recommend-city">
        <div class="col-1">
          <p class="one">GPS定位你所在城市</p>
          <p>定位失败</p>
        </div>
        <div class="col-2">
          <p class="one">热门城市</p>
          <div>
            <p
              v-for="hotCity in hotCityList"
              :key="hotCity.cityId"
              @click="handleCity(hotCity)"
            >
              {{ hotCity.name }}
            </p>
          </div>
        </div>
      </div>
      <van-index-bar
        :index-list="indexList"
        @select="handleChange"
        :sticky-offset-top="100"
        :sticky="true"
      >
        <div v-for="data in cityList" :key="data.letter">
          <van-index-anchor :index="data.letter" />
          <van-cell
            v-for="item in data.cities"
            :key="item.cityId"
            :title="item.name"
            @click="handleCity(item)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import http from '@/utils/http'
import { Toast } from 'vant'
import obj from '@/utils/mixin'
import { mapMutations } from 'vuex'

export default {
  mixins: [obj],
  data () {
    return {
      allCities: [],
      cityList: [],
      hotCityList: [],
      value: '',
      calcHeight: '300px'
    }
  },
  computed: {
    // 计算属性依赖的值改变之后会重新进行计算
    indexList () {
      return this.cityList.map((item) => item.letter)
    },
    searchList () {
      return this.allCities.filter((item) => {
        return (
          item.pinyin.toUpperCase().includes(this.value.toUpperCase()) ||
          item.name.includes(this.value)
        )
      })
    }
  },
  created () {
    // this.$store.commit('hideTabbar')
  },
  mounted () {
    http({
      url: '/gateway?k=4905787',
      headers: {
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then((response) => {
      // console.log(response.data.data.cities)
      this.allCities = response.data.data.cities
      this.cityList = this.renderCity(response.data.data.cities)
      this.hotCityList = response.data.data.cities.filter(
        (item) => item.isHot === 1
      )
      // console.log(this.hotCityList)
    })

    this.calcHeight = document.documentElement.clientHeight - 100 + 'px'
    // onresize 事件会在窗口或框架被调整大小时发生
    window.onresize = () => {
      console.log(document.documentElement.clientHeight)
      this.calcHeight = document.documentElement.clientHeight - 100 + 'px'
    }
  },
  methods: {
    ...mapMutations('city', ['changeCityId', 'changeCityName']),
    onSearch () {
      console.log('搜索')
    },

    onClickLeft () {
      this.$router.back()
    },

    handleCity (item) {
      this.changeCityName(item.name)
      this.changeCityId(item.cityId)
      // this.$store.commit("changeCityName", item.name);
      // this.$store.commit("changeCityId", item.cityId);
      this.$router.back()
    },

    handleChange (data) {
      // console.log(data)
      Toast(data)
    },

    renderCity (list) {
      var letterList = []
      var cityList = []
      for (let i = 65; i < 91; i++) {
        // 生成一个包含所有字母的数组
        letterList.push(String.fromCharCode(i))
      }
      // console.log(letterList)
      letterList.forEach((letter) => {
        var newList = list.filter(
          (item) => item.pinyin.substring(0, 1).toUpperCase() === letter
        )
        // console.log(newList)
        newList.length > 0 &&
          cityList.push({
            letter,
            cities: newList
          })
      })
      return cityList
    }
  }
  // destroyed () {
  //   this.$store.commit('showTabbar')
  // }
}
</script>

<style lang="scss">
.van-index-bar > div:not(:first-of-type) > div:first-of-type {
  background-color: #f4f4f4;
}
.van-toast--html,
.van-toast--text {
  min-width: 20px;
}
.van-search .van-cell {
  background-color: #fff;
}
.recommend-city {
  background: #fff;
  overflow: hidden;

  .one {
    font-size: 13px;
    color: #797d82;
    margin: 20px 0 10px 10px;
  }

  p:not(:first-of-type) {
    width: 33%;
    height: 30px;
    text-align: center;
    background-color: #f4f4f4;
    line-height: 30px;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 7.5px;
    font-size: 14px;
    color: #191a1b;
    margin-left: 20px;
  }

  .col-2 {
    div {
      display: flex;
      flex-wrap: wrap;
      margin-left: 10px;

      p {
        width: 28%;
        height: 30px;
        text-align: center;
        background-color: #f4f4f4;
        line-height: 30px;
        border-radius: 3px;
        box-sizing: border-box;
        margin: 0 7.5px;
        font-size: 14px;
        color: #191a1b;
        margin-bottom: 15px;
      }
    }
  }
}

.value {
  background: #fff;
  margin-bottom: -49px;
  padding-left: 15px;

  li {
    padding: 15px;
    border-bottom: 1px solid #f8f8f8;
    display: flex;
    align-items: center;
    font-size: 13px;
  }
}

.custom-image {
  text-align: center;

  .van-empty__image {
    width: 90px;
    height: 90px;
    position: absolute;
    top: 150px;
  }

  .van-empty__description {
    position: absolute;
    top: 230px;
  }
}
</style>
